<template>
  <pro-layout
    title="左上角标题"
    :logo="logoRender"
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :i18nRender="i18nRender"
    v-bind="settings"
  >
<!--    多标签页-->
    <multi-tab v-if="multiTab"></multi-tab>
    <setting-drawer :settings="settings" @change="handleSettingChange"/>
    <template v-slot:rightContentRender>
      <right-content :top-menu="settings.layout === 'topmenu'" :theme="settings.theme"/>
    </template>
    <template v-slot:footerRender>
      <global-footer/>
    </template>

    <router-view/>
  </pro-layout>
</template>

<script>
  import { SettingDrawer } from '@ant-design-vue/pro-layout'
  import { i18nRender } from '@/locales'
  import { mapState } from 'vuex'
  import { SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'

  import RightContent from '@/components/GlobalHeader/RightContent'
  import GlobalFooter from '@/components/GlobalFooter'
  import LogoSvg from '../assets/logo.svg?inline'
  import MultiTab from '@/components/MultiTab'
  export default {
    name: 'BasicLayout',
    components: {
      SettingDrawer,
      RightContent,
      GlobalFooter,
      MultiTab
    },
    data () {
      return {
        // base
        menus: [],
        // 侧栏收起状态
        collapsed: false,
        settings: {
          // 布局类型
          layout: 'sidemenu', // 'sidemenu', 'topmenu'
          // 定宽: true / 流式: false
          contentWidth: false,
          // 主题 'dark' | 'light'
          theme: 'dark',
          // 主色调
          primaryColor: '#1890ff',
          fixedHeader: false,
          fixSiderbar: false,
          colorWeak: false,

          hideHintAlert: false,
          hideCopyButton: false,
        },
        // 媒体查询
        query: {},
        multiTab:true,

        // 是否手机模式
        isMobile: false
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.addRouters
      })
    },
    created () {
      const routes = this.mainMenu.find(item => item.path === '/')
      this.menus = (routes && routes.children) || []
      // 处理侧栏收起状态
      this.$watch('collapsed', () => {
        this.$store.commit(SIDEBAR_TYPE, this.collapsed)
      })
      this.$watch('isMobile', () => {
        this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
      })
    },
    mounted () {
      const userAgent = navigator.userAgent
      if (userAgent.indexOf('Edge') > -1) {
        this.$nextTick(() => {
          this.collapsed = !this.collapsed
          setTimeout(() => {
            this.collapsed = !this.collapsed
          }, 16)
        })
      }
    },
    methods: {
      i18nRender,
      handleMediaQuery (val) {
        this.query = val
        if (this.isMobile && !val['screen-xs']) {
          this.isMobile = false
          return
        }
        if (!this.isMobile && val['screen-xs']) {
          this.isMobile = true
          this.collapsed = false
          this.settings.contentWidth = false
          // this.settings.fixSiderbar = false
        }
      },
      handleCollapse (val) {
        this.collapsed = val
      },
      handleSettingChange ({ type, value }) {
        console.log('type', type, value)
        type && (this.settings[type] = value)
        switch (type) {
          case 'contentWidth':
            this.settings[type] = value === 'Fixed'
            break
          case 'layout':
            if (value === 'sidemenu') {
              this.settings.contentWidth = false
            } else {
              this.settings.fixSiderbar = false
              this.settings.contentWidth = true
            }
            break
        }
      },
      logoRender () {
        return <LogoSvg/>
      },

    }
  }
</script>

<style lang="less">
  @import "./BasicLayout.less";
</style>
